<template>
    <div :z-index="zIndex">
        <div v-if="mode == 'image'" class="images-box">
            <!-- 一张图片 -->
            <div v-if="typeof this.imgList == 'string'">
                <div v-if="imgList" class="imgs" :style="`width:${width};height:${width};margin-top:${right}};margin-right:${right}`">
                    <img :src="imgList" alt="" />
                    <div class="rowp">
                        <span @click="removeImg()" title="删除图片" class="el-icon-delete"></span>
                        <span
                            @click="
                                isImg = true;
                                imgSrc = imgList;
                            "
                            title="查看图片"
                            class="el-icon-zoom-in"
                        ></span>
                    </div>
                </div>
            </div>
            <!-- 多张图片 -->
            <template v-else>
                <div v-for="(item, i) in imgList" :key="i" class="imgs" :style="`width:${width};height:${width};margin-top:${right}};margin-right:${rightNum == i + 1 ? '0px' : right}`">
                    <img :src="item" alt="" />
                    <div class="rowp">
                        <span @click="removeImg(i)" title="删除图片" class="el-icon-delete"></span>
                        <span
                            @click="
                                isImg = true;
                                imgSrc = item;
                            "
                            title="查看图片"
                            class="el-icon-zoom-in"
                        ></span>
                    </div>
                </div>
            </template>
            <div v-show="loading" class="loading" :style="[{ width: width }, { height: width }]">
                <i class="el-icon-loading"></i>
            </div>
            <div v-show="iconLoading" :style="[{ width: width }, { height: width }]" class="add-img">
                <span class="el-icon-plus"> </span>
                <input type="file" :disabled="loading" @change="uploadImg" title="选择要上传的图片" multiple ref="imgTop" accept="image/jpeg,image/jpg,image/png" />
            </div>
        </div>
        <div v-else-if="mode == 'video'" class="video-box">
            <div v-show="video" class="video">
                <video :src="video" :style="videoStye" controls preload></video>
                <i @click="videoDel" title="删除视频" class="el-icon-error"></i>
            </div>
            <div v-show="loading" class="loading" :style="[{ width: width }, { height: width }]">
                <i class="el-icon-loading"></i>
                <meter :value="progress" min="0" max="100"></meter>
            </div>
            <div v-show="!video && !loading" :style="[{ width: width }, { height: width }]" class="add-img">
                <span class="el-icon-plus"> </span>
                <input type="file" :disabled="loading" @change="uploadVideo" title="选择要上传的视频" multiple ref="videoTop" accept="video/*" />
            </div>
        </div>
        <el-dialog custom-class="images" top="0%" :visible.sync="isImg" append-to-body>
            <img class="images-box" @click="isImg = false" :src="imgSrc" />
        </el-dialog>
    </div>
</template>

<script>
    /*
     */
    /**
     * modal 图片上传 v1.0.6  --修改视频上传bug
     * @description 图片上传
     * @property {String} back 背景色
     * @property {Boolean} readonly 只读
     * @property {Boolean} rightNum 第几个没有右边的margin
     * @property {String | Number} z-index 层级(默认10)
     * @property {String} right margin-right数值(请带上单位px)
     * @property {String} width 图片(包括添加)的宽度(请带上单位px)
     * @property {Number} maxNum 最大上传数(默认9)
     * @property {Array | String} imgList 图片地址如果是字符串类型那就只能上传一张
     * @property {String} mode 模式(默认image): image图片 video视频
     * @property {String} video 视频地址
     * @property {Object} videoStye 视频样式
     * @event {Function} verify 图片验证回调
     * @event {Function} cancel 取消按钮被点击
     * @example <uploadingImg :imgList="imgList"></uploadingImg>
     */
    export default {
        data() {
            return {
                progress: 0,
                loading: false,
                isImg: false,
                imgSrc: '',
                isStr: false, //imgList是否是字符串
            };
        },
        props: {
            readonly: {
                type: Boolean,
                default: false,
            },
            back: {
                type: String,
                default: '#ffffff',
            },
            vname: {
                type: String,
                default: '',
            },
            videoStye: {
                type: Object,
                default() {
                    return {};
                },
            },
            mode: {
                type: String,
                default: 'image',
            },
            video: {
                type: String,
                default: '',
            },
            // 层级z-index
            zIndex: {
                type: [Number, String],
                default: 10,
            },
            rightNum: {
                type: [Number, String],
                default: -1,
            },
            right: {
                type: String,
                default: '32px',
            },
            width: {
                type: String,
                default: '150px',
            },
            maxNum: {
                type: Number,
                default: 9,
            },
            imgList: {
                type: [Array, String],
                default() {
                    return [];
                },
            },
        },
        watch: {
            imgList(val) {
                this.$emit('verify', this.isStr ? !val : !val.length);
            },
        },
        computed: {
            iconLoading() {
                if (this.readonly) return false;
                if (this.vname) console.log(this.vname, '@#@#@#@#@#@#', this.imgList, !this.loading);
                if (this.isStr) {
                    return !this.imgList && !this.loading;
                } else {
                    return this.imgList.length < this.maxNum && !this.loading;
                }
            },
        },
        created() {},
        mounted() {
            this.isStr = typeof this.imgList == 'string';
            // if(this.imgList)console.log(this.imgList,'this.imgList');
            // console.log(this.isStr,"@@#$!@#$!@",typeof this.imgList,this.imgList);
        },
        methods: {
            videoDel() {
                //删除视频
                this.$emit('update:video', '');
            },
            async uploadVideo() {
                //上传视频
                let type = ['image/jpeg', 'image/jpg', 'image/png'];
                let files = this.$refs.videoTop.files[0];
                if (!files) return;
                if (files.size > 100 * 1024 * 1024) {
                    return this.$message.error('视频大小不能超过100MB');
                }
                let formData = new FormData();
                formData.append('files', files);
                this.loading = true;
                this.$Http
                    .upload(formData)
                    .then(({ code, data }) => {
                        // 完成
                        this.loading = false;
                        if (code) {
                            this.$message.success('视频上传成功！');
                            this.$emit('update:video', data);
                            this.$refs.videoTop.value = '';
                        }
                    })
                    .catch((error) => {
                        this.$refs.videoTop.value = '';
                        this.loading = false;
                        // 出错
                    });
                // return;
            },
            removeImg(i) {
                //删除图片
                this.isStr ? this.$emit('update:imgList', '') : this.imgList.splice(i, 1);
            },
            uploadImg() {
                //图片上传  8  4
                let type = ['image/jpeg', 'image/jpg', 'image/png'];
                let files = [...this.$refs.imgTop.files];
                // 剩余能上传图片的数量
                let maxNum = this.isStr ? 1 : this.maxNum - this.imgList.length;
                if (!files.length || !maxNum) {
                    return;
                } else if (files.length > maxNum) {
                    files.splice(maxNum, files.length);
                }
                let ajaxNum = 0;
                files.forEach(async (v, i) => {
                    if (v.size > 10 * 1024 * 1024) {
                        return this.$message.error('图大小不能超过10MB');
                    }
                    if (type.findIndex((v2) => v2 == v.type) != -1) {
                        let formData = new FormData();
                        formData.append('files', v);
                        this.loading = true;
                        let { code, data } = await this.$Http.upload(formData);
                        ajaxNum++;
                        if (code) {
                            this.$message.success('图片上传成功！');
                            // console.log(data,'data');
                            this.isStr ? this.$emit('update:imgList', data) : this.imgList.push(data);
                            this.$refs.imgTop.value = '';
                        }
                        if (ajaxNum == files.length) {
                            // this.$loading.hide()
                            this.loading = false;
                        }
                    } else this.$message.error('上传格式不正确');
                });
            },
        },
    };
</script>
<style lang="scss" scoped>
    ::v-deep .el-dialog {
        min-width: 50%;
        width: auto;
    }
    .images {
        .images-box {
            margin: 0 auto;
            max-width: 95vw;
            max-height: 80vh;
            width: auto;
            background: url(https://api.yiweika.net/uploads/2021/07/31/imagesVFQC5GaX4gob2lCV.png);
        }
    }
    .video-box {
        .video {
            width: max-content;
            position: relative;
            video {
                max-width: 480px;
                max-height: 480px;
                object-fit: scale-down;
            }
            .el-icon-error {
                position: absolute;
                top: 0px;
                right: 0px;
                color: #545454;
                font-size: 30px;
                background-color: #fff;
                border-radius: 50%;
                cursor: pointer;
                transform: translate(50%, -50%);
            }
        }
    }
    .images-box {
        display: flex;
        flex-wrap: wrap;
        // width: 800px;
        // padding-bottom: 30px;
        // border-bottom: #F2F2F2 1px solid;
        .imgs {
            background: url(https://api.yiweika.net/uploads/2021/07/31/imagesVFQC5GaX4gob2lCV.png);
            position: relative;
            width: 120px;
            height: 120px;
            border-radius: 5px;
            margin-top: 22px;
            margin-right: 32px;
            // &:nth-child(4n){
            //     margin-right: 0;
            // }
            &:hover .rowp {
                opacity: 1;
                // transition: all 1s linear;
            }
            .rowp {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                background: #0005;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                color: #fff;
                opacity: 0;
                transition: opacity 0.3s;
                border-radius: 5px;
                span {
                    padding: 5px;
                    font-size: 24px;
                    cursor: pointer;
                }
            }
            img {
                border-radius: 5px;
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    .loading {
        margin-top: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        meter {
            margin-top: 20px;
            width: 100%;
        }
        .el-icon-loading {
            color: #bbb8b8;
            font-size: 34px;
            height: min-content;
        }
    }
    .add-img {
        position: relative;
        margin-top: 22px;
        display: flex;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: auto;
        color: #bbb8b8;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        transition: 0.3s;
        &:hover {
            border-color: #409eff;
            // color: #409eff;
        }
        input {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }
        .el-icon-plus {
            // margin-bottom: 10px;
            font-size: 30px;
        }
    }
    ::v-deep.el-dialog__wrapper {
        // background: red;
        display: flex;
        justify-content: center;
        align-items: center;
        // height: 100vh;
        // .el-dialog{
        //     transform: translateY(-50%);
        // }
    }
    ::v-deep.el-image {
        display: block;
        margin: 0 auto;
    }
</style>
